<template>
	<view class="">
		<!-- 头部 -->
		<view class="diamondMall_head p20 flex-between flex1"
			:style="[{ background: bg_color},{paddingTop:blindBoxheight+'rpx'}]">
			<view class="" style="margin: -15rpx 0 0 0;">
				<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
					@click="backmarket()"></image>
			</view>
			<view class="size-30 center" :style="{opacity:textcolor}" style="margin: 0 40rpx 0 0rpx;">
				邀请好友
			</view>
			<view class="">

			</view>
		</view>
		<view class="relative" style="width:100%;height: 2000rpx;">
			<view class="InviteFriends_bg">
				<image class="photo" src="../../static/home/bg.png" mode="">
					<view class="absolute InviteFriends_top" style="">
						<image class="photo" src="../../static/home/bg_2.png" mode=""></image>
						<view class="fw size-28"
							style="position: absolute;top: 150rpx;left: 50%;transform: translateX(-50%);">
							您的专属邀请码为
						</view>
						<view class="fw size-28 InviteFriends_code" style="">
							{{arr.uuid}}
						</view>
						<view class="fw size-28 InviteFriends_portrait" style="">
							<image class="photo" :src="arr.qr_code_image" mode=""></image>
						</view>
						<view class="fw size-28 InviteFriends_text_1" style="">
							扫码二维码
						</view>
						<view class="fw size-28 InviteFriends_text_2" style="">
							注册进入天衍
						</view>
						<view class="fw size-28 InviteFriends_text_3" style="">
							<image class="photo" src="../../static/home/yaoqingdaohang.png" mode=""></image>
						</view>
					</view>
					<view class="absolute InviteFriends_botton" style="">
						<view class=" InviteFriends_botton_text ">
							<view class="flex1" style="align-items: center;">
								<view class="InviteFriends_botton_text_1">
								</view>
								<view class="InviteFriends_botton_text_2 mlr-30 size-36 fw">
									邀请记录
								</view>
								<view class="InviteFriends_botton_text_3">
								</view>
							</view>
							<view class="center size-26 mt-20 fw" style="color: #7F1E00;">
								我已邀请{{length}}人
							</view>

							<view class="InviteFriends_botton_textera black">
								<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="lowerBottom" class="scroll-Y"
									style="height: 200px;">
									<u-table>
										<u-tr>
											<u-th style="background-color: #F3E6C6;">编号</u-th>
											<u-th style="background-color: #F3E6C6;">用户手机</u-th>
											<u-th style="background-color: #F3E6C6;">邀请结果</u-th>
										</u-tr>
										<u-tr v-for="item in arrlist">
											<u-td>{{item.uuid}}</u-td>
											<u-td>{{item.phone}}</u-td>
											<u-td v-if="item.is_auth==0">未认证</u-td>
											<u-td v-if="item.is_auth==1">已认证</u-td>
										</u-tr>
										<!-- <u-tr v-for="item in 20">
											<u-td>3HKII9</u-td>
											<u-td>15086714352</u-td>
											<u-td v-if="item.is_auth==0">未认证</u-td>
										</u-tr> -->

									</u-table>
								</scroll-view>
							</view>

						</view>

					</view>

				</image>

			</view>

			<!-- <image class="photo InviteFriends_bg" src="../../static/home/raffle_bg1.png" mode=""></image> -->
			<view class="collectPay_buttom_button1">
				<image src='../../static/home/background.png' mode="widthFix"></image>
				<view class="flex1 InviteFriends_bottom flex-center">
					<view class="" style="width: 40rpx;height: 40rpx;">
						<image class="photo" src='../../static/home/fuzhi.png' mode=""></image>
					</view>
					<!-- <view class="" style="width: 40rpx;height: 40rpx;">
						<image class="photo" src='../../static/home/xiazai.png' mode=""></image>
					</view> -->
				</view>
				<view class="flex1 InviteFriends_bottom_text size-20 flex-center">
					<view class="mt-30" @click="copy(arr.register_url)">
						复制链接
					</view>
					<!-- <view class="mt-30" @click="savePosterTap">
						保存图片
					</view> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import app from "@/common/download.js"
	import {
		globalData
	} from "@/App.vue"
	export default {

		data() {
			return {
				qr_code_image: '',
				length: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				show: false,
				colorList: ["blue", "red", "yellow"],
				blindBoxheight: '',
				textcolor: '0',
				bg_color: '',
				arr: {},
				arrlist: [],
				page: 1
			}
		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
		},
		onShow() {
			this.app_token = uni.getStorageSync('im_token')
			// console.log(this.app_token);
			this.$http('api/user/share', {}).then(res => {
				console.log(res);
				this.arr = res
				this.register_url = res.register_url
			})
			this.init()
		},
		methods: {
			init(){
				this.$http('api/user/inviteList', {
					page: this.page
				}).then(res => {
					console.log(res);
					this.length = res.count
					this.arrlist = this.arrlist.concat(res.data)
				})
			},
			lowerBottom(){
				console.log('触底了')
				if(this.arrlist){
					this.page++
					this.init()
				}
				
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			savePosterTap() {
				// console.log(this.arr.qr_code_image);
				const that = this;
				uni.downloadFile({
					url: this.arr.qr_code_image,
					header: {

					},
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
								},
								fail: function() {
									this.tools.toast('保存失败，请稍后重试');
								}
							});
						} else {
							this.tools.toast('下载失败');
						}
					}
				});
			},
			// 复制链接
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制链接',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '复制链接!',
							icon: 'none'
						});
					},

				);
				// #endif
			},

			// 保存图片
			save() {

			},
			checktext() {
				this.show = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.InviteFriends_botton_textera {
		position: absolute;
		top: 65px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 280px;
		height: 220px;
		background-color: #fff;
		z-index: 11111;
		border-radius: 24rpx;
	}

	.InviteFriends_botton_text {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		color: #F5F842;
		align-items: center;
	}

	.InviteFriends_botton_text_1 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #F5F842;
	}

	.InviteFriends_botton_text_3 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #F5F842;
	}

	.InviteFriends_text_1 {
		position: absolute;
		top: 650rpx;
		left: 50%;
		transform: translateX(-50%);
		// width: 300rpx;
		// height: 300rpx;
		// border-radius: 40rpx;
		// background-color: #FFF;
	}

	.InviteFriends_text_2 {
		position: absolute;
		top: 700rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	.InviteFriends_text_3 {
		position: absolute;
		top: 750rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 160rpx;
		height: 60rpx;

	}

	.InviteFriends_portrait {
		position: absolute;
		top: 330rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 300rpx;
		height: 300rpx;
		border-radius: 40rpx;
		background-color: #FFF;
	}

	.InviteFriends_code {
		position: absolute;
		top: 215rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #E04C2E;
		width: 260rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 40rpx;
		color: #F8EA41;
	}

	.InviteFriends_top {
		width: 600rpx;
		height: 900rpx;
		top: 10%;
		left: 50%;
		transform: translateX(-50%)
	}

	.InviteFriends_botton {
		width: 600rpx;
		height: 680rpx;
		top: 53%;
		left: 50%;
		transform: translateX(-50%);
		background: #FA5C37;
		border-radius: 40rpx;
		// z-index: -1;

	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.InviteFriends_bottom {
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		/* margin: 0 9px 5px 1px; */
		width: 350rpx;
		justify-content: center;
	}

	.InviteFriends_bottom_text {
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		/* margin: 0 9px 5px 1px; */
		width: 400rpx;
		justify-content: center;
		margin: 12rpx 0 0 0;
	}

	.InviteFriends_bg {
		position: absolute;
		// z-index: -1;
		background-image: linear-gradient(to bottom, #78E0A5, #57D28D);
		width: 100%;
		height: 100%;
	}

	.collectPay_buttom_button1 {
		width: 760rpx;
		height: 100rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		z-index: 0;
		bottom: 120rpx;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: block;
	}
</style>
